/* 
 * CSS 自定义属性（CSS Variables）
 * 用于在Docker环境中确保样式的一致性
 * 当SCSS变量导入失败时的备用方案
 */

:root {
  /* 侧边栏颜色 */
  --menu-text: #333333;
  --menu-active-text: #409EFF;
  --sub-menu-active-text: #409EFF;
  --menu-bg: #ffffff;
  --menu-hover: #f5f7fa;
  --sub-menu-bg: #ffffff;
  --sub-menu-hover: #f5f7fa;

  /* 主题颜色 */
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;

  /* 文本颜色 */
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #C0C4CC;

  /* 边框颜色 */
  --border-color-base: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  --border-color-extra-light: #F2F6FC;

  /* 背景颜色 */
  --background-color-base: #f5f7fa;

  /* 禁用状态 */
  --disabled-bg: #F5F7FA;
  --disabled-text: #C0C4CC;
  --disabled-border: #E4E7ED;

  /* 头部导航栏 */
  --navbar-height: 60px;
  --navbar-bg: #ffffff;

  /* 侧边栏宽度 */
  --sidebar-width: 220px;
}

/* 确保全局样式正确应用 */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100%;
}

/* 应急样式规则 - 当SCSS变量失效时生效 */
.sidebar-container {
  background-color: var(--menu-bg) !important;
}

.el-menu {
  background-color: var(--menu-bg) !important;
  border-right: none !important;
}

.el-menu-item {
  color: var(--menu-text) !important;
}

.el-menu-item:hover {
  background-color: var(--menu-hover) !important;
}

.el-menu-item.is-active {
  color: var(--menu-active-text) !important;
  background-color: var(--menu-hover) !important;
}

.el-sub-menu__title {
  color: var(--menu-text) !important;
}

.el-sub-menu__title:hover {
  background-color: var(--menu-hover) !important;
}
